<template>
    <div class="user-data__filter-item">
        <a-input v-model:value="batchCode" allow-clear :placeholder="t('yl.batchName')" />
    </div>
    <div class="user-data__filter-item">
        <a-select ref="select" v-model:value="specsCode" :placeholder="t('yl.recoverySpecsName')" style="width: 120px">
            <a-select-option value="1">正常</a-select-option>
            <a-select-option value="2">冻结</a-select-option>
            <a-select-option value="3">删除</a-select-option>
        </a-select>
    </div>
    <div class="user-data__filter-item">
        <a-range-picker v-model:value="createTime" valueFormat="YYYY-MM-DD HH:mm:ss" show-time format="YYYY-MM-DD HH:mm:ss" />
    </div>

    <div class="user-data__filter-item">
        <yl-search-reset :loading="loading" @submit="handleSubmit" @reset="handleReset"></yl-search-reset>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs } from 'vue';
import ylDatePicker from '@/components/ylDatePicker.vue';
import ylSearchReset from '@/components/ylSeachReset.vue';
import { useI18n } from 'vue-i18n';

export default defineComponent({
    name: 'user-filter',
    components: {
        ylDatePicker,
        ylSearchReset,
    },
    props: {
        selectOptions: {
            type: Array,
            default: () => [],
        },
        hideEnabled: {
            type: Boolean,
            default: () => false,
        },
    },
    emits: ['onSubmit', 'onReset'],
    setup(props, { emit }) {
        const { t } = useI18n();
        const state = reactive({
            batchCode: null,
            specsCode: null,
            createTime: [],
        });
        const loading = ref<boolean>(false);
        const handleSubmit = () => {
            emit('onSubmit', state);
        };
        const handleReset = () => {
            state.batchCode = null;
            state.specsCode = null;
            state.createTime = [];
            emit('onReset', state);
        };

        return {
            ...toRefs(state),
            loading,
            handleSubmit,
            handleReset,
            t,
        };
    },
});
</script>
<style lang="scss" scoped>
.user-data__filter-item {
    margin-right: $width20;
    &:last-child {
        margin-right: $width0;
    }
}
</style>
